import React from 'react';
import { Button } from 'antd';
import { ObjectType } from '../../utils';
import DetailPageTable from './detailPageTable';
import { userTypes } from '@/const/risk';
import { toExamine } from '../service';
import { DATA_PERMISSION, dataPermissionObj as obj } from '@/const/dataPermission';
import createPage from '../../../../components/container';
import img from '@/assets/image/flag.png';
import style from './detailPage.less';

class DetailPage extends React.Component<ObjectType, ObjectType> {
  public state = {
    longer: false,
    insertRemark: '',
    option: '',
  };

  public buttonGroupConfig = [
    {
      className: 'pass',
      text: '审核通过',
      status: 1,
    },
    {
      className: 'pending',
      text: '审核搁置',
      status: 3,
    },
    {
      className: 'refuse',
      text: '审核拒绝',
      status: 2,
    },
  ];

  userInfo = () => {
    const {
      detailPageData: { username, userType },
    } = this.props;
    const level = userTypes.filter((val: ObjectType) => val.id === userType * 1)[0].text;
    return (
      <div className={style.userInfo}>
        <h3 className="user-name">{username}</h3>
        <p className="amount-type">{level}</p>
        <p className="user-level">玩家层级</p>
      </div>
    );
  };

  // 两个备注的模板
  remarkTemplate = (title: string, remark: string) => (
    <div className={style.remarkBox}>
      <h3 className={style.title}>{title}</h3>
      <div className={style.remark}>{remark}</div>
    </div>
  );

  //  点击按钮打开modal
  toConfirm = (okText: string, okButtonProps: ObjectType) => {
    const {
      modal: { show },
    } = this.props;
    show('examine', { okText, okButtonProps });
    this.setState({
      option: okText,
    });
  };

  // 输入审核备注
  handleRemarkInsertChange = (e: ObjectType) => {
    const value = e.target.value.trim();
    const len = value.split('').length;
    if (len < 46) {
      this.setState({
        insertRemark: value,
        longer: false,
      });
    } else {
      const showLockReason = value.slice(0, 45);
      this.setState({
        insertRemark: showLockReason,
        longer: true,
      });
    }
  };

  // 点击modal的确认按钮 跳转到审核结果页
  GoToExamine = () => {
    const {
      detailPageData: { subType, changeType, orderId },
      toExamineResultPage,
    } = this.props;
    const { insertRemark, option } = this.state;
    if (insertRemark) {
      // 获取menuId这段逻辑是从来系统扒过来的
      let keyWord;
      if (subType === 9) {
        if (changeType === 1018) {
          // eslint-disable-next-line prefer-destructuring
          keyWord = obj[subType][0][1];
        } else {
          // eslint-disable-next-line prefer-destructuring
          keyWord = obj[subType][1][1];
        }
      } else {
        // eslint-disable-next-line prefer-destructuring
        keyWord = obj[subType][1];
      }
      const { status } = this.buttonGroupConfig.filter((val: ObjectType) => val.text === option)[0];
      const menuId = DATA_PERMISSION[keyWord];
      toExamine({
        orderId,
        remark: insertRemark,
        status,
        menuId,
        step: 2,
      }).then((data: ObjectType) => {
        const { code, message } = data;
        const isSuccess = code === 1;
        toExamineResultPage(isSuccess, option, message);
      });
    }
  };

  render() {
    const {
      toInquiryPage,
      detailPageData: { remark, firstRemark, status },
      modal: { createModal, close },
      userLevel,
    } = this.props;
    const { insertRemark, longer } = this.state;
    return (
      <div className={style.detailPageWrap}>
        <div className={style.title}>
          <img src={img} alt="" className={style.flag} />
          <span>资金调整详情</span>
        </div>

        <DetailPageTable detailPageData={this.props.detailPageData} userLevel={userLevel} />
        <div className={style.remarkArea}>
          {this.remarkTemplate('申请理由', remark)}
          {this.remarkTemplate('一审人员备注', firstRemark)}
        </div>

        <footer className={style.detailPageFooter}>
          <Button className="back" onClick={() => toInquiryPage()}>
            返回首页
          </Button>
          {status === 1 || status === 5 ? (
            <>
              {this.buttonGroupConfig.map((val: ObjectType) => (
                <Button
                  className={val.className}
                  key={val.className}
                  onClick={() => this.toConfirm(val.text, { className: val.className })}
                >
                  {val.text}
                </Button>
              ))}
            </>
          ) : null}
        </footer>

        {createModal('examine', {
          title: '请输入审核备注',
          content: (
            <div>
              <textarea
                className="remarkInsert"
                onChange={this.handleRemarkInsertChange}
                value={insertRemark}
              />
              {longer && <p className="warn">备注不能超过45个字符</p>}
              <DetailPageTable detailPageData={this.props.detailPageData} userLevel={userLevel} />
            </div>
          ),
          width: 1000,
          wrapClassName: 'examineModal',
          okButtonProps: { disabled: !insertRemark.length },
          onCancel: () => close('examine'),
          onOk: this.GoToExamine,
        })}
      </div>
    );
  }
}

export default createPage(DetailPage);
